<template>
	<view class="page-container">
		<uni-nav-bar dark :fixed="true" status-bar :border="false" title="新航向教育" />
		<view class="work">
			<view class="title">
				<view class="title-inner">
					<text>推广信息</text>
					<!-- <text class="iconfont icon-write"></text> -->
					<!-- <view class="btn" type="primary" ">消息订阅</view> -->
				</view>
			</view>
			<view v-if='recommendList && recommendList.length'>
				<view v-for="(item,index) in recommendList" :key='index' class="work-item" hover-class="active"
					@click="subscribeMessage" @tap="toDetail(item)">
					<view class="item-title">
						<view>{{item.title}}</view>
						<text>{{formatData(item.createTime)}}</text>
					</view>
					<view class="describe text-ellipsis">
						<text>{{item.content ? item.content : '暂无'}}</text>
					</view>
				</view>
				<view :class="more?'loader':'noMore'">
					<view>{{more?'':'没有更多了~'}}</view>
				</view>
			</view>
			<view v-else class="noData">
				暂无数据
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				code: '',
				list: [],
				currentPage: 1,
				pageSize: 10,
				recommendList: [],
				tmplId: ['RE6BOF6eM4EbeCDJsQIvBeF9-TyX2jpG6qJdJO4fDcs', 'y2XBEkkPMBkqyNgPRx1Ncn3ZI7nBLX7NwW-b8lXzJW8']
			}
		},
		onLoad(options) {

		},
		computed: {
			...mapState(['accessToken'])
		},
		onShow() {
			const token = uni.getStorageSync('user_token');
			// console.log('token', token)
			if (!token) {
				this.getLogin();
			} else {
				this.initRecommendList();
			}
		},
		methods: {
			...mapMutations(['setStoreAccessToken']),
			getLogin() {
				let that = this;
				wx.login({
					success: res => {
						this.code = res.code;
						if (this.code) {
							let params = {
								code: this.code
							}
							this.$api.get_ready_auth(params).then(res => {
								if (res.code === 200) {
									uni.removeStorageSync('user_token');
									uni.setStorageSync('user_token', res.data.accessToken);
								} else {
									uni.showModal({
										title: '温馨提示',
										content: '请先授权登录',
										confirmText: '同意',
										cancelText: '关闭',
										success: function(res) {
											if (res.confirm) {
												uni.navigateTo({
													// 保留当前页面，跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面
													url: "/pages/auth/auth"
												})
											} else if (res.cancel) {
												console.log('关闭');
											}
										}
									});
								}
							})
						}
					}
				})
			},
			// 获取推荐列表
			initRecommendList(city_id) {
				this.$api.promotionList({
					page: this.currentPage,
					pageSize: this.pageSize,
					type: 0
				}).then(res => {
					if (res.code == 200) {
						this.total = res.data.totalCount;
						if (this.currentPage == 1) {
							this.recommendList = res.data.rows;
							if (this.recommendList.length < this.total) {
								this.loadStatus = "more";
							} else {
								this.loadStatus = "no-more";
							}
						} else {
							this.loadStatus = "loading";
							setTimeout(() => {
								this.recommendList = this.recommendList.concat(res.data.rows);
								if (this.recommendList.length < this.total) {
									this.loadStatus = "more";
								} else {
									this.loadStatus = "no-more";
								}
							}, 1000)
						}

						uni.hideNavigationBarLoading();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			// 跳转推广详情
			toDetail(item) {
				if (this.user_token) {
					uni.navigateTo({
						// 保留当前页面，跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面
						url: "/pages/promotion/promotionDetail?id=" + item.id,
					})
				} else {
					uni.showModal({
						title: '温馨提示',
						content: '请先授权登录',
						confirmText: '同意',
						cancelText: '关闭',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									// 保留当前页面，跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面
									url: "/pages/auth/auth"
								})
							} else if (res.cancel) {
								console.log('关闭');
							}
						}
					});
				}
			},
			// 时间戳转换
			formatData(value) {
				var date = new Date(parseInt(value));
				//date.setTime(value);
				var month = date.getMonth() + 1;
				var day = date.getDate();
				// var hours = date.getHours();
				if (month < 10) month = "0" + month;
				var minutes = date.getMinutes();
				if (day < 10) day = "0" + day;
				// var time = date.getFullYear() + "-" + month + "-" + date.getDate() +" " + hours + ":" + minutes;
				var time = date.getFullYear() + "-" + month + "-" + day;
				return time;
			},
			// 判断消息订阅总开关是否打开
			subscribeMessage(flag) {
				uni.getSetting({
					withSubscriptions: true,
					success: (res) => {
						if (!res.subscriptionsSetting.mainSwitch) { // 订阅消息的总开关,如果是关着的，引导用户去打开
							this.showPopup = true
						} else { // 如果开着，则继续向下打开弹窗，获取用户授权
							this.messageSubscription()
						}
					},
					fail() {
						this.messageSubscription() // 如果失败，也打开弹窗，获取用户授权
					}
				})
			},

			// 订阅申请弹出，只允许点击弹出
			messageSubscription() {
				uni.requestSubscribeMessage({
					tmplIds: this.tmplId,
					success: (res) => {
						if (res['RE6BOF6eM4EbeCDJsQIvBeF9-TyX2jpG6qJdJO4fDcs'] == 'accept' || res[
								'y2XBEkkPMBkqyNgPRx1Ncn3ZI7nBLX7NwW-b8lXzJW8'] == 'accept') {
							// wx.showToast({
							// 	icon:'none',
							// 	title: '消息订阅成功'
							// })
						}
					},
				})
			},
		}
	}
</script>

<style lang="scss">
	.work {
		width: 680rpx;
		margin: auto;
		background: #fff;

		.title {
			.title-inner {
				width: 680rpx;
				height: 120rpx;
				margin: auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid $uni-bg-color-grey;

				text {
					font-size: 42rpx;
					font-weight: bold;
				}
			}
		}
	}

	.work-item {
		// width: 680rpx;
		padding: 30rpx 35rpx;
		margin: auto;
		border-radius: 10rpx;
		background: $uni-bg-color;
		margin-bottom: 20rpx;

		.item-title {
			display: flex;
			justify-content: space-between;
			font-weight: bold;

			view {
				font-size: 34rpx;
			}

			text {
				font-size: 30rpx;
				color: $uni-primary;
			}
		}

		.describe {
			margin-top: 25rpx;

			text {
				margin-right: 20rpx;
				font-size: 28rpx;
				color: $uni-text-color-grey;
			}
		}

		.text-ellipsis {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			-o-text-overflow: ellipsis;
		}

		.tags {
			margin-top: 12rpx;

			.tag {
				background: #F5F5F5;
				margin-right: 10rpx;
				// padding: 2rpx 16rpx;
				height: 42rpx;
				font-size: 24rpx;
				color: $uni-text-color-grey;
			}
		}

		.boss {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 12rpx;

			.info {
				display: flex;
				width: 100px;

				.pic {
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
					margin-right: 16rpx;

					image {
						width: 48rpx;
						height: 48rpx;
						border-radius: 50%;
					}
				}
			}

			.place {
				flex: 1;
				color: $uni-text-color-grey;
				font-size: 24rpx;
				text-align: right;
			}
		}
	}

	.active {
		background: $uni-bg-color-grey;
	}

	.border {
		border-bottom: 1rpx solid $uni-border-color;
		padding: 40rpx 0;
	}

	.btn {
		width: 200rpx;
		height: 50rpx;
		background: $uni-primary;
		border-radius: 10rpx;
		color: $uni-text-color-inverse;
		line-height: 50rpx;
		text-align: center;
	}

	.loader {
		background: #fff;
		padding: 30rpx 0;

		view {
			border: 10rpx solid #fff;
			border-top: 10rpx solid $uni-color-primary;
			border-right: 10rpx solid #91DAD3;
			border-bottom: 10rpx solid #B0EBE5;
			border-left: 10rpx solid #E2F7F0;
			border-radius: 50%;
			width: 40rpx;
			height: 40rpx;
			animation: spin .8s linear infinite;
			margin: auto;
		}
	}

	.noMore {
		color: $uni-text-color-grey;
		background: #fff;
		padding: 30rpx 0;
		font-size: 28rpx;
		text-align: center;
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}
</style>
